<script src="../../../../../../server/request.js"></script>
<template>
  <div>
    <Table border :columns="columns1" :data="level_data">
      <template slot-scope="{ row,index }" slot="num">
        {{index+1}}
      </template>
      <template slot-scope="{ row,index }" slot="level_pic">
        <img :src="row.level_pic_url" alt="" class="preview">
      </template>
      <template slot-scope="{ row,index }" slot="opera">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(index)">编辑</Button>
        <Button type="error" size="small"  @click="remove(index)">删除</Button>
      </template>
    </Table>
    <row id="button_box">
      <row>
        <Col span="8" offset="8">
          <Button type="success" long @click="addModalFlag = true">新增档位</Button>
        </Col>
      </row>
      <Col span="8" offset="1">
          <Button @click="pre" style="margin-right: 8px">上一步</Button>
          <Button type="primary" @click="finish">提交</Button>
      </Col>
    </row>
<!--项目添加框-->
    <modal v-model="addModalFlag" >
      <p slot="header" style="text-align:center">
        <span>新增档位</span>
      </p>
      <row>
        <Col span="18" offset="2">
          <Form ref="formValidate" :model="formValidate" :label-width="80">
            <FormItem label="档位名称">
              <Input v-model="formValidate.level_name" @keyup.native="no_null_name" placeholder="请输入档位名称"></Input>
            </FormItem>
            <FormItem label="档位图片">
              <Upload
                  action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                  :before-upload="level_pic"
                  accept="image/*"
              >
                <Button icon="ios-cloud-upload-outline">选择图片</Button>
              </Upload>
              <div v-if="formValidate.level_pic_url != null">
                <img :src="formValidate.level_pic_url" alt="" class="preview">
              </div>
            </FormItem>
            <FormItem label="支持金额">
              <Input v-model="formValidate.level_money" placeholder="请输入金额数"></Input>
            </FormItem>
            <FormItem label="名额">
              <Input v-model="formValidate.level_quota" placeholder="请输入名额数"></Input>
            </FormItem>
            <FormItem label="回报内容">
              <Input v-model="formValidate.level_return_content" @keyup.native="no_null_content" placeholder="请输入回报详情"></Input>
            </FormItem>
            <FormItem label="回报时间">
              <Input v-model="formValidate.level_return_time" placeholder="请输入最晚发货天数"></Input>
            </FormItem>
          </Form>
        </Col>
      </row>
      <div slot="footer">
        <Button type="primary" size="large" long @click="addLevel()">添加</Button>
      </div>
    </modal>

<!--    项目编辑弹框-->
    <modal v-model = "editModalFlag" >
      <p slot="header" style="text-align:center">
        <span>账号编辑</span>
      </p>
      <row>
        <Col span="12" offset="4">
          <Form ref="formValidate" :model="formValidate" :label-width="80">
            <FormItem label="档位名称">
              <Input v-model="formValidate.level_name" @keyup.native="no_null_edit_name"></Input>
            </FormItem>
            <FormItem label="档位图片">
              <Upload
                  action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                  :before-upload="level_pic"
                  accept="image/*"
              >
                <Button icon="ios-cloud-upload-outline">选择图片</Button>
              </Upload>
              <div v-if="formValidate.level_pic_url != null">
                <img :src="formValidate.level_pic_url" alt="" class="preview">
              </div>
            </FormItem>
            <FormItem label="支持金额">
              <Input v-model="formValidate.level_money" ></Input>
            </FormItem>
            <FormItem label="名额">
              <Input v-model="formValidate.level_quota" ></Input>
            </FormItem>
            <FormItem label="回报内容">
              <Input v-model="formValidate.level_return_content" @keyup.native="no_null_edit_content"></Input>
            </FormItem>
            <FormItem label="回报时间">
              <Input v-model="formValidate.level_return_time" ></Input>
            </FormItem>
          </Form>
        </Col>
      </row>
      <div slot="footer">
        <Button type="primary" size="large" long @click="closeEdit()">保存</Button>
      </div>
    </modal>
  </div>

</template>

<script>
  import  {submit_total} from 'server/sponsor.js'
  export default {
    name: "level_info",
    data () {
      return {
        stepNumber : "second",
        addModalFlag : false,
        editModalFlag : false,
        columns1: [
          {
            title: '序号',
            key: 'Num',
            slot:'num'
          },
          {
            title: '档位名称',
            key: 'level_name'
          },
          {
            title: '档位图片',
            key: 'level_pic',
            slot: 'level_pic'
          },
          {
            title: '支持金额',
            key: 'level_money'
          },
          {
            title: '名额',
            key: 'level_quota'
          },
          {
            title: '回报内容',
            key: 'level_return_content'
          },
          {
            title: '回报时间',
            key: 'level_return_time'
          },
          {
            title: '操作',
            key: 'opera',
            slot: 'opera'
          }
        ],
        formValidate: {
          level_name: "",
          level_pic_file: "",
          level_pic_url: null,
          level_money: "",
          level_quota: "",
          level_return_content: "",
          level_return_time: "",
          index:''
        },
        level_data: [],
        level_data_arr: [],
        level_pic_num: "",
      }
    },
    methods: {
      level_pic(file){
        this.formValidate.level_pic_file = file;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const _base64 = reader.result;
          this.formValidate.level_pic_url = _base64;
        }
        return false;
      },
      finish () {
        if (this.level_data.length == 0){
          return this.$Message.error('请添加档位信息')
        }else {
          let formdata = new FormData();
          let sort = this.$store.state.sponsor.sort;
          let project_name = this.$store.state.sponsor.project_name;
          let days = this.$store.state.sponsor.days;
          let money = this.$store.state.sponsor.money;
          let desc = this.$store.state.sponsor.desc;
          let thumbnail_file = this.$store.state.sponsor.thumbnail_file;
          let long_pic_file = this.$store.state.sponsor.long_pic_file;
          let detail_pic_file = this.$store.state.sponsor.detail_pic_file;
          let video_file = this.$store.state.sponsor.video_file;
          // let level_data = JSON.stringify(this.level_data);
          let detail_pic_num = detail_pic_file.length;
          let AccessToken = window.localStorage.getItem('front_token');
          let level_pic_num = this.level_data.length;

          formdata.append("sort",sort);
          formdata.append("project_name",project_name);
          formdata.append("days",days);
          formdata.append("money",money);
          formdata.append("desc",desc);
          formdata.append('thumbnail_file', thumbnail_file);
          formdata.append('long_pic_file', long_pic_file);
          formdata.append('video_file', video_file);

          for(let i = 0; i<detail_pic_num; i++){
            formdata.append('detail_pic_file'+i, detail_pic_file[i]);
          }
          formdata.append("detail_pic_num",detail_pic_num);
          formdata.append("AccessToken",AccessToken);
          formdata.append("level_pic_num",level_pic_num);

          for (let i = 0 ;i < this.level_data.length ;i++){
            let level_name = this.level_data[i].level_name;
            let level_pic_file = this.level_data[i].level_pic_file;
            let level_money = this.level_data[i].level_money;
            let level_quota = this.level_data[i].level_quota;
            let level_return_content = this.level_data[i].level_return_content;
            let level_return_time = this.level_data[i].level_return_time;

            formdata.append('level_pic_file'+i,level_pic_file);

            this.level_data_arr.push({
              'level_name':level_name,
              'level_money':level_money,
              'level_quota':level_quota,
              'level_return_content':level_return_content,
              'level_return_time':level_return_time,
            })

          }
          let level_data_arr = JSON.stringify(this.level_data_arr);
          formdata.append("level_data_arr",level_data_arr);


          submit_total(formdata).then(res=>{
  
              if (res.err_code == 1000){
                  this.$emit('finish', this.stepNumber)
              }else {
                  alert("出错了")
              }

          })
        }


      },
      pre(){
        this.$emit('pre', this.stepNumber)
      },
      /*get_basic_info(){
          let sort = this.$store.state.sponsor.sort
          let project_name = this.$store.state.sponsor.project_name
          let days = this.$store.state.sponsor.days
          let money = this.$store.state.sponsor.money
          let desc = this.$store.state.sponsor.desc
          let thumbnail_url = this.$store.state.sponsor.thumbnail_url
          let long_pic_url = this.$store.state.sponsor.long_pic_url
      },*/
      addLevel(){
        if (!this.formValidate.level_name) {
          return this.$Message.error('请填写档位名称')
        }
        if (!this.formValidate.level_pic_url) {
          return this.$Message.error('请选择项目图片')
        }
        if (!this.$rex.money(this.formValidate.level_money)) {
          return this.$Message.error('请填写正确的支持金额')
        }
        if (!this.$rex.money(this.formValidate.level_quota)) {
          return this.$Message.error('请填写正确的名额')
        }
        if (!this.formValidate.level_return_content) {
          return this.$Message.error('请填写相应的回报内容')
        }
        if (!this.$rex.money(this.formValidate.level_return_time)) {
          return this.$Message.error('请填写正确的天数')
        }
       
        this.level_data.push(
          {
            level_name:this.formValidate.level_name,
            level_pic_url:this.formValidate.level_pic_url,
            level_pic_file:this.formValidate.level_pic_file,
            level_money:this.formValidate.level_money,
            level_quota:this.formValidate.level_quota,
            level_return_content:this.formValidate.level_return_content,
            level_return_time:this.formValidate.level_return_time,
            file_name:"image"
          }
        );
          this.addModalFlag = false;

      },
      edit(index){
        this.editModalFlag = true;
        this.formValidate.level_name = this.level_data[index].level_name;
        this.formValidate.level_pic_url = this.level_data[index].level_pic_url;
        this.formValidate.level_pic_file = this.level_data[index].level_pic_file;
        this.formValidate.level_money = this.level_data[index].level_money;
        this.formValidate.level_quota = this.level_data[index].level_quota;
        this.formValidate.level_return_content = this.level_data[index].level_return_content;
        this.formValidate.level_return_time = this.level_data[index].level_return_time;
        this.formValidate.index = index;
      },
      closeEdit(){
        let index = this.formValidate.index;
        let level_name = this.formValidate.level_name;
        let level_pic_url = this.formValidate.level_pic_url;
        let level_pic_file = this.formValidate.level_pic_file;
        let level_money = this.formValidate.level_money;
        let level_quota = this.formValidate.level_quota;
        let level_return_content = this.formValidate.level_return_content;
        let level_return_time = this.formValidate.level_return_time;

        if (!level_name) {
          return this.$Message.error('请填写档位名称')
        }
        if (!level_pic_url){
          return this.$Message.error('请选择档位图片')
        }
        if (!this.$rex.money(level_money)) {
          return this.$Message.error('请填写正确的支持金额')
        }
        if (!this.$rex.money(level_quota)) {
          return this.$Message.error('请填写正确的名额')
        }
        if (!level_return_content) {
          return this.$Message.error('请填写相应的回报内容')
        }
        if (!this.$rex.money(level_return_time)) {
          return this.$Message.error('请填写正确的天数')
        }

        this.level_data[index].level_name = level_name;
        this.level_data[index].level_pic_url = level_pic_url;
        this.level_data[index].level_pic_file = level_pic_file;
        this.level_data[index].level_money = level_money;
        this.level_data[index].level_quota = level_quota;
        this.level_data[index].level_return_content = level_return_content;
        this.level_data[index].level_return_time = level_return_time;

        this.editModalFlag = false;


      },
      remove (index) {
          this.level_data.splice(index, 1);
      },
      no_null_name() {
        this.formValidate.level_name = this.formValidate.level_name.replace(/^\s+|\s+$/gm,'')
      },
      no_null_content(){
        this.formValidate.level_return_content = this.formValidate.level_return_content.replace(/^\s+|\s+$/gm,'')
      },
      no_null_edit_name(){
        this.formValidate.level_name = this.formValidate.level_name.replace(/^\s+|\s+$/gm,'')
      },
      no_null_edit_content(){
        this.formValidate.level_return_content = this.formValidate.level_return_content.replace(/^\s+|\s+$/gm,'')
      }
    },
    created() {

    },
  }
</script>

<style scoped>
#button_box{
  margin-top: 25px;
}
  button{
    margin-bottom: 25px;
  }
.preview{
  width: 80px;
}
</style>